<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <ChildComponent v-if="showChild" ref="childComponentRef" />
  </div>
</template>

<script>
import { ref, nextTick } from "vue";

import ChildComponent from "../ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  setup() {
    const showChild = ref(false);
    const childComponentRef = ref(null);
    // 在这个例子中，我们有一个ChildComponent，它根据showChild的值来条件性地渲染。
    //当我们点击按钮时，toggleComponent方法会被调用，它切换showChild的值。
    //然后，我们使用nextTick()来等待Vue的DOM更新队列清空，确保如果ChildComponent被创建，
    //它现在已经被挂载到DOM上；如果它被销毁，它已经从DOM上移除。
    async function toggleComponent() {
      showChild.value = !showChild.value;

      // 等待DOM更新
      //await nextTick();

      if (showChild.value) {
        // 现在ChildComponent已经被创建并挂载到DOM上

        console.log(
          "Child component has been mounted:",
          //如果不使用  await nextTick(); 此时得不到childComponentRef,其值也得不到
          childComponentRef.value
        );
      } else {
        // 现在ChildComponent已经被销毁并从DOM上移除
        console.log("Child component has been unmounted.");
      }
    }

    return {
      showChild,
      childComponentRef,
      toggleComponent,
    };
  },
};
</script>
